<template>
  <div>
    <div class="i-layout-page-header">
      <PageHeader class="product_tabs" :title="$route.meta.title" hidden-breadcrumb></PageHeader>
    </div>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form :label-width="80" @submit.native.prevent>
        <FormItem label="关联名称：">
          <Input v-model="agreement.title"></Input>
        </FormItem>
        <FormItem label="关联内容：">
		  <vue-ueditor-wrap
		   v-model="agreement.content"
		    @beforeInit="addCustomDialog"
		    :config="ueConfig"
		    style="width: 90%"
		  ></vue-ueditor-wrap>
        </FormItem>
        <FormItem label="开启状态：">
          <i-switch
              v-model="agreement.status"
              size="large"
              :true-value="1"
              :false-value="0"
          >
            <span slot="open">开启</span>
            <span slot="close">关闭</span>
          </i-switch>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="memberAgreementSave">保存</Button>
        </FormItem>
      </Form>
      <Spin fix v-if="spinShow"></Spin>
    </Card>
  </div>
</template>

<script>
import VueUeditorWrap from "vue-ueditor-wrap";
import { memberAgreement2, memberAgreementSave } from "@/api/user";

export default {
  components: { VueUeditorWrap },
  data() {
    return {
      ueConfig: {
        autoHeightEnabled: false,
        initialFrameHeight: 500,
        initialFrameWidth: "100%",
        UEDITOR_HOME_URL: "/admin/UEditor/",
        serverUrl: ""
      },
      id: 0,
      agreement: {
		type:2,
        title: "",
        content: "",
        status: 1
      },
      spinShow:false
    };
  },
  created() {
    this.memberAgreement();
  },
  methods: {
    memberAgreement() {
      this.spinShow = true;
      memberAgreement2()
          .then(res => {
            this.spinShow = false;
            const { title, content, status, id } = res.data;
            this.agreement.title = title;
            this.agreement.content = content;
            this.agreement.status = status;
            this.id = id;
          })
          .catch(err => {
            this.$Message.error(err);
            this.spinShow = false;
          });
    },
    // 保存
    memberAgreementSave() {
      this.$Spin.show();
      memberAgreementSave(this.id, this.agreement)
          .then(res => {
            this.$Spin.hide();
            this.$Message.success("保存成功");
            this.memberAgreement();
          })
          .catch(err => {
            this.$Spin.hide();
            this.$Message.error(err);
          });
    },
	// 添加自定义弹窗
	addCustomDialog(editorId) {
	  window.UE.registerUI(
	    "test-dialog",
	    function (editor, uiName) {
	      // 创建 dialog
	      let dialog = new window.UE.ui.Dialog({
	        iframeUrl: "/admin/widget.images/index.html?fodder=dialog",
	        editor: editor,
	        name: uiName,
	        title: "上传图片",
	        cssRules: "width:1200px;height:500px;padding:20px;",
	      });
	      this.dialog = dialog;
	      let btn = new window.UE.ui.Button({
	        name: "dialog-button",
	        title: "上传图片",
	        cssRules: `background-image: url(https://cdn.oss.9gt.net/prov1.1/1/icons.png);background-position: -726px -77px;`,
	        onclick: function () {
	          // 渲染dialog
	          dialog.render();
	          dialog.open();
	        },
	      });
	      return btn;
	    },
	    37
	  );
	  window.UE.registerUI(
	    "video-dialog",
	    function (editor, uiName) {
	      let dialog = new window.UE.ui.Dialog({
	        iframeUrl: "/admin/widget.video/index.html?fodder=video",
	        editor: editor,
	        name: uiName,
	        title: "上传视频",
	        cssRules: "width:1000px;height:500px;padding:20px;",
	      });
	      this.dialog = dialog;
	      let btn = new window.UE.ui.Button({
	        name: "video-button",
	        title: "上传视频",
	        cssRules: `background-image: url(../../../assets/images/icons.png);background-position: -320px -20px;`,
	        onclick: function () {
	          // 渲染dialog
	          dialog.render();
	          dialog.open();
	        },
	      });
	      return btn;
	    },
	    38
	  );
	},
	formatRichText(html) {
	  let newContent = html.replace(/<img[^>]*>/gi, function (match, capture) {
	    match = match
	      .replace(/style="[^"]+"/gi, "")
	      .replace(/style='[^']+'/gi, "");
	    match = match
	      .replace(/width="[^"]+"/gi, "")
	      .replace(/width='[^']+'/gi, "");
	    match = match
	      .replace(/height="[^"]+"/gi, "")
	      .replace(/height='[^']+'/gi, "");
	    return match;
	  });
	  newContent = newContent.replace(
	    /style="[^"]+"/gi,
	    function (match, capture) {
	      match = match
	        .replace(/width:[^;]+;/gi, "max-width:100%;")
	        .replace(/width:[^;]+;/gi, "max-width:100%;");
	      return match;
	    }
	  );
	  newContent = newContent.replace(/<br[^>]*\/>/gi, "");
	  newContent = newContent.replace(
	    /\<img/gi,
	    '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"'
	  );
	  return newContent;
	},
  }
};
</script>

<style></style>
